<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
                           integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
                           crossorigin="anonymous">

    <title>WebGL Volume Raycaster</title>
</head>
<body>
    <div class="container mt-4">
        <div class="row">
            <div class="col-12 text-center">
                <h4>WebGL Volume Raycaster</h4>
                <canvas id="glcanvas" class="img-fluid" width="640" height="480"></canvas>
            </div>
            <div class="mx-auto col-12 col-lg-8 row">
                <div class="col-12 col-lg-6 mb-lg-0 mb-2">
                    Volume: <select id="volumeList" onchange="selectVolume()"></select>
                </div>
                <div class="col-12 col-lg-6 mb-lg-0 mb-2">
                    Colormap: <select id="colormapList" onchange="selectColormap()"></select>
                </div>
                <div class="col-12 mt-lg-2 mt-0">
                    <h4>Controls</h4>
                    <p>Desktop: Left-click + drag to rotate, scroll to zoom,
                    right-click + drag to pan.
                    <br/>
                    Touch: One finger drag to rotate, pinch to zoom, two finger drag to pan.

                    <p id="loadingText"></p>
                    <div class="progress mb-2">
                        <div id="loadingProgressBar" class="progress-bar" role="progressbar"
                                                                          aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <h4>Description</h4>
                    This is a WebGL implementation of a standard <a href="https://en.wikipedia.org/wiki/Volume_ray_casting">volume raycaster</a>
                    which uses a single render-pass to raycast the volume. The sampling rate is dynamically
                    adjusted to maintain an interactive framerate across different devices (desktops, laptops, phones).
                    <a href="https://github.com/Twinklebear/webgl-volume-raycaster">
                        Get the code on GitHub!</a>
                </div>
            </div>
        </div>
    </div>
    <script src="js/gl-matrix-min.js"></script>
    <script src="js/webgl-util.js"></script>
    <script src="js/shader-srcs.js"></script>
    <script src="js/FileSaver.js"></script>
    <script src="js/volume-raycaster.js"></script>
</body>
</html>

